<!-- 1 定义组件模版 --> 
<template>
    
    <div class="comApp">
      <ul>
        <li v-for="chapter in chapters">
          <!-- to="url?query" -->
         <!-- <router-link :to="`/css/detail/${chapter.id}/${chapter.title}/${chapter.content}`">
            {{ chapter.title }}  
          </router-link>  -->

          <!-- 
              :to={
                path:'',
                query:{}
              }
           -->
          <router-link :to="{
            name:'CssDetail',
            params:{
              id: chapter.id,
              title: chapter.title,
              content: chapter.content,
            }
          }">  {{ chapter.title }} </router-link>



         </li> 
        </ul> 

      <div>
        <router-view></router-view>
      </div>
      </div>

  </template> 
  
  <!-- 2 定义组件逻辑 -->
  <script setup lang="ts" name="CssComponent"> 
  import { ref  ,reactive } from 'vue'	
  
  let chapters = reactive([
  { id: "asdfsadf001", title: '布局', content: '使用position属性进行布局' },
  { id: "asdfsadf002", title: '内置函数', content: '内置了calc，xxx等函数' },
  { id: "asdfsadf003", title: '属性（宽高）', content: '宽高的取值有  px cm vh vw等 ' },
])
  
  </script> 
  
  <!-- 3 定义样式 -->
<style scoped> .com {
  overflow-y: auto;
  min-height: 300px
}

.comApp>ul,
.comApp>div {
  margin: 10px;
  display: inline-block;
  vertical-align: top;
}
</style>